import React from 'react'
import style from './Index.module.less'
import CurrentStep from '../CurrentStep/Index'
import HistoryList from '../HistoryList/Index'
import NoAuthorityCurrentStep from '../NoAuthorityCurrentStep/Index'
import { useSelector } from 'react-redux'

function Main ({ data, refreshApprove }) {
  const { uid } = useSelector(state => {
    return {
      uid: state.basic.userInfo.id
    }
  })
  const operators = (data.currentStep ? data.currentStep.operators : []).map(li => li.accountid)
  const operatable = operators.includes(uid)
  return (
    <div className={style.container}>
      <div className={style.header}>
        <span>{data.flow_name}</span>
      </div>
      <HistoryList data={data.history} instance={data} />
      {operatable && data.currentStep.step_key && <CurrentStep data={data.currentStep} instance={data} refreshApprove={refreshApprove} />}
      {!operatable && data.currentStep.step_key && <NoAuthorityCurrentStep data={data.currentStep} />}
    </div>
  )
}

export default Main
